<template>
  <el-container>
    <!-- 顶栏 -->
    <el-header>
      <div @click="isCollapse=!isCollapse">
        <img src="../assets/imgs/logo.png" alt=""/>
      </div>
      <div>
        <span style="margin-right: 10px">欢迎您：{{ userInfo }}</span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link"><i class="el-icon-setting"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="logout">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'">
        <el-scrollbar style="height: 100%">
          <el-menu background-color="#222D32" text-color="#fff" router unique-opened :collapse="isCollapse"
                   :collapse-transition="false">
            <el-submenu v-for="item in menuList" v-if="item.children" :index="item.id+''" :key="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item v-for="subItem in item.children" :index="subItem.path" :key="subItem.id">
                <span slot="title">{{ subItem.name }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.path" :key="item.id">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <!-- 主窗体 -->
        <el-main>
          <!-- 面包屑导航
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          </el-breadcrumb>
          -->
          <el-scrollbar style="height: 100%">
            <!-- 路由导航 -->
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
        <!-- 底栏
        <el-footer style="height: 30px;">Copyright &copy; <a href="https://www.aioyo.cn/"
                                                             style="text-decoration: none">版权归作者所有</a>
        </el-footer>
        -->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userInfo: '',
      menuList: [{
        id: 0,
        name: '首页',
        icon: 'el-icon-s-home',
        path: '/index',
      }, {
        id: 1,
        name: '实用工具',
        icon: 'el-icon-s-tools',
        children: [{
          id: 11,
          name: '仪表盘',
          path: '/welcome',
        }, ]
      }, {
        id: 2,
        name: '应用管理',
        icon: 'el-icon-s-help',
        children: [{
          id: 21,
          name: 'FRP_WEB',
          path: '/podnsbasedata',
        }, ]
      }],
      isCollapse: false,
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('username'))
  },
}
</script>

<style scoped>
.el-container {
  height: 100%;
  overflow: hidden;
}

.el-header {
  line-height: 60px;
  background-color: #222D32;
  color: white;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.el-footer {
  background-color: #3C8DBC;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-aside {
  background-color: #222D32;
  color: white;
  text-align: left;
  overflow: auto;
}

.el-menu {
  border-right: 0;
}

.el-dropdown-link {
  color: powderblue;
  font-size: 18px;
}
</style>
